"use client";
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { Home, Users, Calendar, Book, MapPin, User, Package, Menu, X } from 'lucide-react';
import dynamic from 'next/dynamic';

const menuItems = [
  { name: 'Home', icon: Home, href: '/' },
  { name: 'Campuses', icon: MapPin, href: '/campuses' },
  { name: 'Courses', icon: Book, href: '/courses' },
  { name: 'Venues', icon: MapPin, href: '/venues' },
  { name: 'Coaches', icon: User, href: '/coaches' },
  { name: 'Students', icon: Users, href: '/students' },
  { name: 'Course Packages', icon: Package, href: '/course-packages' },
  { name: 'Reservations', icon: Calendar, href: '/reservations' },
];

const DashboardLayout = ({ children }) => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [currentPath, setCurrentPath] = useState('/');
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
    setCurrentPath(window.location.pathname);
  }, []);

  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);

  if (!isMounted) {
    return null; // or a loading spinner
  }

  return (
    <div className="flex h-screen bg-gray-100">
      {/* Sidebar */}
      <aside className={`bg-white shadow-md w-64 fixed inset-y-0 left-0 transform ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} md:relative md:translate-x-0 transition duration-200 ease-in-out z-20`}>
        <div className="flex items-center justify-between p-4 border-b">
          <span className="text-xl font-semibold">Dashboard</span>
          <button onClick={toggleSidebar} className="md:hidden">
            <X size={24} />
          </button>
        </div>
        <nav className="mt-5">
          {menuItems.map((item) => (
            <Link key={item.name} href={item.href}>
              <span className={`flex items-center px-6 py-2 mt-4 duration-200 border-l-4 ${
                currentPath === item.href ? 'border-blue-500 text-blue-500' : 'border-transparent hover:bg-gray-100'
              }`}>
                <item.icon className="w-5 h-5" />
                <span className="mx-4">{item.name}</span>
              </span>
            </Link>
          ))}
        </nav>
      </aside>

      {/* Main content */}
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* Top bar */}
        <header className="bg-white shadow-sm z-10">
          <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
            <div className="flex items-center justify-between">
              <h2 className="font-semibold text-xl text-gray-800">
                {menuItems.find(item => item.href === currentPath)?.name || 'Dashboard'}
              </h2>
              <button onClick={toggleSidebar} className="md:hidden">
                <Menu size={24} />
              </button>
            </div>
          </div>
        </header>

        {/* Page content */}
        <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
            {children}
          </div>
        </main>
      </div>

      {/* Overlay for mobile */}
      {isSidebarOpen && (
        <div
          className="fixed inset-0 bg-black opacity-50 z-10 md:hidden"
          onClick={toggleSidebar}
        ></div>
      )}
    </div>
  );
};

export default dynamic(() => Promise.resolve(DashboardLayout), { ssr: false });